<template>
	<view class="page-container">
		<!-- <view class="gray-wrap"></view> -->
		<!-- 左侧导航区域：使用侧边栏导航+固定定位固定在左侧 -->
		<view class="left-wrap" style="background: #f1f1f1;">
			<left-nav ref="leftNavRef" :list="list" @change="onChange" @changeNextTitle="value=> (nextTitle = value)" />
		</view>
		<!-- 右侧内容区域：使用页面级滚动的滚动导航-->
		<view class="right-wrap" style="height: 100%;">
			<y-pull-loading v-model="isLoading" :pullDistance="100" :disabled="pullDisabled" @refresh="onRefresh">
				<!-- 右侧滚动导航 -->
				<right-scroll-nav :shop_category_banners="shop_category_banners" ref="rightScrollNav" />

				<!-- 自定义上拉提示 -->
				<template #pulling>
					<view v-if="!pullDisabled" class="y-pull-loading__loosing-content">
						<uni-icons type="navigate" size="18" color="#F56C6C" />
						<text class="y-pull-loading__loosing-text">向上继续拉浏览 {{nextTitle}}</text>
					</view>
					<view v-else>
						<!-- 禁用时给个无内容的view -->
					</view>
				</template>
				<!-- 自定义释放提示 -->
				<template #loosing>
					<view class="y-pull-loading__loosing-content">
						<uni-icons type="navigate" size="18" color="#F56C6C" />
						<text class="y-pull-loading__loosing-text">释放即可浏览 {{nextTitle}}</text>
					</view>
				</template>
			</y-pull-loading>
		</view>
	</view>
</template>

<script>
	
	import leftNav from './leftNav';
	import rightScrollNav from './rightScrollNav';
	import { getShopAll } from '../../apis/index.js'
	export default {
		components: {
			leftNav,
			rightScrollNav,
		},
		data() {
			return {
				nextTitle: "",
				isLoading: false,
				list:[],
				shop_category_banners:[]
				
			}
		},
		computed: {
			// 是否已经切换到最后一个tab了,是则禁用y-pull-loading
			pullDisabled() {
				return this.nextTitle?.length === 0
			}
		},
		// 发出scroll、reachBottom，y-pull-loading会监听这两个事件
		onPageScroll(e) {
			uni.$emit("scroll", e)
		},
		onReachBottom() {
			uni.$emit('reachBottom')
		},
		async mounted() {
				await this.getList()
				this.$refs?.rightScrollNav?.changeData(0,this.list[0].name)
		},
		methods: {
		async getList(){
			let res=await getShopAll({
				id:1
			})
			this.list=res.data.children
			this.shop_category_banners=res.data.shop_category_banner
		},
			// 左侧导航点击事件
			onChange(index, title) {
				this.$refs?.rightScrollNav?.changeData(index, title)
			},
			onRefresh() {
				setTimeout(() => {
					this.isLoading = false;
					this.$refs?.leftNavRef?.changeActiveIndex();
				}, 1000);
			},
		}
	};
</script>

<style lang="scss" scoped>
// 隐藏scroll-view的滚动条
/* #ifndef APP-NVUE */
::-webkit-scrollbar {
    display: none;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}
/* #endif */

/* QQ/百度/字节跳动/飞书/快手/京东小程序，自定义组件在渲染时会比App/H5端多一级节点，导致标签内容使用的flex失效，需在组件上增加如下class */
/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU || MP-JD */
.y-tab-virtual {
	position: relative; 
	flex-shrink: 0;
	width: 100%;
}
/* #endif */

// 底部安全区适配
@mixin safeAreaBottom ($bottom: 0px){
	box-sizing: border-box;
	padding-bottom: calc(constant(safe-area-inset-bottom) + $bottom);
	padding-bottom: calc(env(safe-area-inset-bottom) + $bottom);
}

.page-container {
	@include safeAreaBottom(); // 底部安全区适配
	background:#f1f1f1;
	min-height: 100vh;
	.title-wrap {
		margin: 0;
		padding: 64rpx 32rpx 32rpx;
		color: #555;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 32rpx;

		/* #ifndef APP-NVUE */
		&:nth-child(1) {
			padding-top: 16rpx;
		}
		/* #endif */

		&__desc {
			color: rgba(69, 90, 100, 0.6);
			font-size: 24rpx;
			line-height: 40rpx;
		}
		
		&__desc:nth-child(1) {
			padding-top: 12rpx;
		}
	}

	.content-wrap {
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		height: 160rpx;
		line-height: 160rpx;
		padding-left: 32rpx;
		// text-align: center;
	}
}

	.page-container {
		background-color: #f1f1f1;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: flex-end;
	
		// 左侧导航区域
		.left-wrap {
			box-sizing: border-box;
			flex-shrink: 0;
			width: 110px;
			position: fixed;
			left: 0;
		}
	
		// 右侧滚动内容区域
		.right-wrap {
			box-sizing: border-box;
			flex-shrink: 0;
			width: calc(100vw - 110px);
			// background-color: #fff;
		}
	}
	
	// 上拉加载组件
	::v-deep .y-pull-loading {
	
		&--text,
		.y-loading__text,
		.y-pull-loading__loosing-text {
			font-size: 12px !important;
		}
	
		.y-pull-loading__loosing-content {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			height: 50px;
		}
	
		.y-pull-loading__loosing-text {
			margin-left: 4px;
		}
	
		.y-loading__spinner {
			width: 12px;
			height: 12px;
		}
	}
	
	
	// 左侧垂直导航
	::v-deep .left-wrap .y-tabs {
	
		// 区域滚动下的垂直标签栏模式
		&.is-areaScroll.is-vertical {
			/* #ifdef H5 */
			height: calc(100vh - 44px);
			/* #endif */
			/* #ifndef H5 */
			height: 100vh;
			/* #endif */
		}
	
		// 标签栏
		.y-tabs__wrap {
			width: 100% !important;
		}
		
		.y-tabs__nav {
			@include safeAreaBottom(); // 底部安全区适配
		}
	
		// 去掉内容页
		.y-tabs__content.is-vertical {
			width: 0 !important;
		}
	
		.y-tab {
			// background-color: #f1f1f1;
			height: 92rpx;
	
			&.is-active {
				.y-tab__title {
					overflow: unset;
				}
	
				.y-tab__text {
					transform: scale(1.2);
					font-weight: bold;
				}
			}
	
			// 图片
			&__image {
				width: 8px;
				height: 20px;
			}
		}
	
	}
	
	// 右侧滚动导航
	::v-deep .right-wrap .y-tabs {
	
		// 不让滚动导航的标签栏占满屏幕高度
		&__wrap {
			// padding-left: 8px;
	
			// &.is-fixed {
			// 	width: calc(100vw - 110px);
			// 	right: 0;
			// 	left: 110px !important;
			// }
		}
	
		// 标签栏滚动容器
		&__scroll {
			width: calc(100% - 50px) !important;
		}
	
		// 标签
		.y-tab {
			padding: 0 4px 0 0;
	
			.y-tab__title {
				padding: 0 8px;
				border-radius: 26px;
				line-height: 26px;
				height: 26px;
				transition: all .2s;
				background: #fff;
				border: 2rpx solid #fff;
			}
	
			// 选中的标签
			&.is-active .y-tab__title {
				background: rgba(245, 108, 108, 0.1);
				border: 2rpx solid #F56C6C;
			}
		}
	}
</style>